﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="wpOceans">
    <link rel="shortcut icon" type="image/png" href="assets/images/favicon.png">
    <title>Pengu - eCommerce HTML5 Template</title>
    <link href="assets/css/themify-icons.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/flaticon.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/animate.css" rel="stylesheet">
    <link href="assets/css/owl.carousel.css" rel="stylesheet">
    <link href="assets/css/owl.theme.css" rel="stylesheet">
    <link href="assets/css/slick.css" rel="stylesheet">
    <link href="assets/css/slick-theme.css" rel="stylesheet">
    <link href="assets/css/swiper.min.css" rel="stylesheet">
    <link href="assets/css/owl.transitions.css" rel="stylesheet">
    <link href="assets/css/jquery.fancybox.css" rel="stylesheet">
    <link href="assets/css/odometer-theme-default.css" rel="stylesheet">
    <link href="assets/sass/style.css" rel="stylesheet">
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>

<body>

    <!-- start page-wrapper -->
    <div class="page-wrapper">
        <!-- start preloader -->
        <div class="preloader">
            <div class="vertical-centered-box">
                <div class="content">
                    <div class="loader-circle"></div>
                    <div class="loader-line-mask">
                        <div class="loader-line"></div>
                    </div>
                    <img src="assets/images/preloader.png" alt="">
                </div>
            </div>
        </div>
        <!-- end preloader -->

        <!-- Start header -->
        <header id="header" class="wpo-header-style-2">
            <!-- end topbar -->
            <div class="wpo-site-header">
                <nav class="navigation navbar navbar-expand-lg navbar-light">
                    <div class="container-fluid">
                        <div class="row align-items-center">
                            <div class="col-lg-3 col-md-3 col-3 d-lg-none dl-block">
                                <div class="mobail-menu">
                                    <button type="button" class="navbar-toggler open-btn">
                                        <span class="sr-only">Toggle navigation</span>
                                        <span class="icon-bar first-angle"></span>
                                        <span class="icon-bar middle-angle"></span>
                                        <span class="icon-bar last-angle"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="col-lg-2 col-md-6 col-6">
                                <div class="navbar-header">
                                    <a class="navbar-brand" href="/"><img src="assets/images/logo-2.svg" alt="logo"></a>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-1 col-1">
                                <div id="navbar" class="collapse navbar-collapse navigation-holder">
                                    <button class="menu-close"><i class="ti-close"></i></button>
                                    <ul class="nav navbar-nav mb-2 mb-lg-0">
                                        <li>
                                            <a class="active" href="/">Home</a>
                                        </li>
                                        <li><a href="/web/shop/">Shop</a></li>
                                        <li>
                                            <a href="/web/cart/">Cart</a>
                                        </li>
                                        <li><a href="/web/contact/">Contact Us</a></li>
                                    </ul>
                                </div><!-- end of nav-collapse -->
                            </div>
                            <div class="col-lg-2 col-md-2 col-2">
                                <div class="header-right">
                                    <div class="mini-cart">
                                        <button class="cart-toggle-btn"><i class="fi flaticon-shopping-cart"></i> <span
                                                class="cart-count">{{ cartinfo.allcount }}</span></button>
                                        <div class="mini-cart-content">
                                            <button class="mini-cart-close"><i class="ti-close"></i></button>
                                            <div class="mini-cart-items">
                                                <!-- 
                                                <div class="mini-cart-item clearfix">
                                                    <div class="mini-cart-item-image">
                                                        <a href="/web/shop/"><img
                                                                src="assets/images/shop/mini-cart/img-1.jpg" alt /></a>
                                                    </div>
                                                    <div class="mini-cart-item-des">
                                                        <a href="/web/shop/">White Wedding Shoe</a>
                                                        <span class="mini-cart-item-price">$100.15 x 1</span>
                                                        <span class="mini-cart-item-quantity"><a href="#"><i
                                                                    class="ti-close"></i></a></span>
                                                    </div>
                                                </div>
                                                <div class="mini-cart-item clearfix">
                                                    <div class="mini-cart-item-image">
                                                        <a href="/web/shop/"><img
                                                                src="assets/images/shop/mini-cart/img-2.jpg" alt /></a>
                                                    </div>
                                                    <div class="mini-cart-item-des">
                                                        <a href="/web/shop/">Long Sleeve Tops</a>
                                                        <span class="mini-cart-item-price">$230.25 x 2</span>
                                                        <span class="mini-cart-item-quantity"><a href="#"><i
                                                                    class="ti-close"></i></a></span>
                                                    </div>
                                                </div>
                                                -->
                                                {% for goods in cartinfo.cartInfo %}
                                                <div class="mini-cart-item clearfix">
                                                    <div class="mini-cart-item-image">
                                                        <a href="/web/shop/"><img src="{{ goods.goods.cimage }}"
                                                                alt /></a>
                                                    </div>
                                                    <div class="mini-cart-item-des">
                                                        <a href="/web/shop/">{{ goods.goods.goodsname }}</a>
                                                        <span class="mini-cart-item-price">${{ goods.goods.cprice }} x
                                                            {{ goods.goods.ccount }}</span>
                                                        <span class="mini-cart-item-quantity"><a
                                                                href="/web/rmgoods/?id={{ goods.goods.id }}"><i
                                                                    class="ti-close"></i></a></span>
                                                    </div>
                                                </div>
                                                {% endfor %}
                                            </div>
                                            <div class="mini-cart-action clearfix">
                                                <span class="mini-checkout-price">Subtotal: <span>${{ cartinfo.subprice
                                                        }}</span></span>
                                                <div class="mini-btn">
                                                    <a href="/web/chekcout/" class="view-cart-btn s1">Checkout</a>
                                                    <a href="/web/cart/" class="view-cart-btn">View Cart</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="header-search-form-wrapper">
                                        <div class="cart-search-contact">
                                            <button class="search-toggle-btn"><i class="fi flaticon-loupe"></i></button>
                                            <div class="header-search-form">
                                                <form>
                                                    <div>
                                                        <input id="searchText" type="text" class="form-control"
                                                            placeholder="Search here...">
                                                        <button id="searchBtn">
                                                            <i class="fi flaticon-loupe"></i>
                                                        </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="header-login">
                                        <a class="login-btn" href="/web/login/"><i class="fi flaticon-user"
                                                style="color: #fff;"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end of container -->
                </nav>
            </div>
        </header>
        <!-- end of header -->

        <!-- start of wpo-hero-section-1 -->
        <section class="hero hero-slider-wrapper hero-style-2">
            <div class="hero-slider">
                <div class="slide">
                    <div class="container">
                        <div class="row">
                            <div class="col col-lg-6 col-md-8 col-sm-12 slide-caption">
                                <div class="slide-title">
                                    <h2>Lets Shop & Get the
                                        Best Discounts </h2>
                                </div>
                                <div class="slide-subtitle">
                                    <p>Atnon ullamcorper amet nulla tortor sed quis quam. Sitortor tristique ante vel
                                        viverra.
                                        Sed pretium suscipit nec estquam.</p>
                                </div>
                                <div class="btns">
                                    <a href="/web/shop/" class="theme-btn">Start Shopping</a>
                                </div>
                            </div>
                        </div>
                        <div class="slider-pic">
                            <img src="assets/images/slider/slide-1.jpg" alt>
                        </div>
                    </div>
                </div>

                <div class="slide">
                    <div class="container">
                        <div class="row">
                            <div class="col col-lg-6 col-md-8 col-sm-12 slide-caption">
                                <div class="slide-title">
                                    <h2>Women Fashion & Best Discounts</h2>
                                </div>
                                <div class="slide-subtitle">
                                    <p>It was popularised in the 1960s with the release sheets. We bring the right
                                        people together</p>
                                </div>
                                <div class="btns">
                                    <a href="/web/shop/" class="theme-btn">Explore More</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-pic">
                        <img src="assets/images/slider/slide-2.jpg" alt>
                    </div>
                </div>
                <div class="slide">
                    <div class="container">
                        <div class="row">
                            <div class="col col-lg-6 col-md-8 col-sm-12 slide-caption">
                                <div class="slide-title">
                                    <h2>New fashion sale Women Fashion</h2>
                                </div>
                                <div class="slide-subtitle">
                                    <p>It was popularised in the 1960s with the release sheets. We bring the right
                                        people together</p>
                                </div>
                                <div class="btns">
                                    <a href="/web/shop/" class="theme-btn">Explore More</a>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-pic">
                        <img src="assets/images/slider/slide-3.jpg" alt>
                    </div>
                </div>
                <div class="slide">
                    <div class="container">
                        <div class="row">
                            <div class="col col-lg-6 col-md-8 col-sm-12 slide-caption">
                                <div class="slide-title">
                                    <h2>Winter-spring 2023!</h2>
                                </div>
                                <div class="slide-subtitle">
                                    <p>It was popularised in the 1960s with the release sheets. We bring the right
                                        people together</p>
                                </div>
                                <div class="btns">
                                    <a href="/web/shop/" class="theme-btn">Explore More</a>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-pic">
                        <img src="assets/images/slider/slide-4.jpg" alt>
                    </div>
                </div>
                <div class="slide">
                    <div class="container">
                        <div class="row">
                            <div class="col col-lg-6 col-md-8 col-sm-12 slide-caption">
                                <div class="slide-title">
                                    <h2>Unique Furniture Style</h2>
                                </div>
                                <div class="slide-subtitle">
                                    <p>It was popularised in the 1960s with the release sheets. We bring the right
                                        people together</p>
                                </div>
                                <div class="btns">
                                    <a href="/web/shop/" class="theme-btn">Explore More</a>

                                </div>
                            </div>
                        </div>
                        <div class="slider-pic">
                            <img src="assets/images/slider/slide-5.jpg" alt>
                        </div>
                    </div>
                </div>
        </section>
        <!-- end of wpo-hero-section-1 -->

        <!-- start of pengu-product-section -->
        <section class="pengu-product-section section-padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-12">
                        <div class="wpo-section-title">
                            <h2>New Arraival</h2>
                            <p>Here is our new arraival products that you may like.</p>
                        </div>
                    </div>
                </div>

                <div class="product-wrap">
                    <div class="row">
                        <div class="row">
                            {% for good in goods1 %}
                            <div class="col-lg-3 col-md-6 col-12">
                                <div class="product-single-item">
                                    <div class="image">
                                        <img src={{ good.info.gimage }} alt="">

                                        <ul class="cart-wrap">
                                            <li>
                                                <a href="/web/addtocart/?id={{good.info.id}}" data-bs-toggle="tooltip"
                                                    data-bs-html="true" title="Add To Cart"><i
                                                        class="fi flaticon-shopping-cart"></i></a>
                                            </li>
                                            <li data-bs-toggle="modal" data-bs-target="#popup-quickview"
                                                data-custom-param='{"name": "John", "age": 25}'>
                                                <button data-bs-toggle="tooltip" data-bs-html="true"
                                                    title="Quick View"><i class="fi ti-eye"></i></button>
                                            </li>
                                            <li>
                                                <a href="/web/tocheckout/?id={{ good.info.id }}"
                                                    data-bs-toggle="tooltip" data-bs-html="true" title="Checkout"><i
                                                        class="fa fa-credit-card" aria-hidden="true"></i></a>
                                            </li>
                                        </ul>
                                        <div class="shop-btn">
                                            <a class="product-btn" href="/web/shop/">Shop Now</a>
                                        </div>
                                    </div>
                                    <div class="text">
                                        <h2><a href="/web/singlegoods/?id={{good.info.id}}">{{ good.info.gname }}</a>
                                        </h2>
                                        <div class="price">
                                            <del class="old-price">${{ good.info.goldprice }}</del>
                                            <span class="present-price">${{ good.info.gprice }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

            </div>
        </section>
        <!-- end of pengu-product-section -->

        <!-- start of pengu-banner-section -->
        <section class="pengu-banner-section">
            <div class="container">
                <div class="banner-wrap">
                    <div class="row">
                        <div class="col-lg-7 col-md-9 col-12">
                            <div class="content">
                                <div class="bg-text">
                                    <h1>fasion</h1>
                                </div>
                                <h2>Stylish casual
                                    sweater & sneakers</h2>
                                <p>Beautiful, Fashionable and Stylish</p>
                                <a href="/web/shop/">Shop Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end of pengu-banner-section -->

        <!-- start of pengu-product-category-section -->
        <section class="pengu-product-category-section section-padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-12">
                        <div class="wpo-section-title">
                            <h2>Popular Products</h2>
                            <p>Here is our new arraival products that you may like.</p>
                        </div>
                    </div>
                </div>
                <div class="category-wrap">
                    <div class="row">
                        <div class="col col-xs-12 sortable-gallery">
                            <div class="gallery-container gallery-fancybox masonry-gallery row">
                                <!-- 
                                <div class="col-lg-3 col-md-6 col-12 custom-grid IllustAtor all sales women zoomIn"
                                    data-wow-duration="2000ms">
                                    <div class="product-single-item">
                                        <div class="image">
                                            <img src="assets/images/product-category/1.jpg" alt="">
                                            <ul class="cart-wrap">
                                                <li>
                                                    <a href="/web/cart/" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Add To Cart"><i
                                                            class="fi flaticon-shopping-cart"></i></a>
                                                </li>
                                                <li data-bs-toggle="modal" data-bs-target="#popup-quickview">
                                                    <button data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Quick View"><i class="fi ti-eye"></i></button>
                                                </li>
                                                <li>
                                                    <a href="checkout.html" data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Checkout"><i class="fa fa-credit-card"
                                                            aria-hidden="true"></i></a>
                                                </li>
                                            </ul>
                                            <div class="shop-btn">
                                                <a class="product-btn" href="/web/shop/">Shop Now</a>
                                            </div>
                                        </div>
                                        <div class="text">
                                            <h2><a href="product-single.html">Long Sleeve Tops</a></h2>
                                            <div class="price">
                                                <del class="old-price">$85.50</del>
                                                <span class="present-price">$70.30</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                  -->
                                {% for good in goods2 %}
                                <div class="col-lg-3 col-md-6 col-12 custom-grid IllustAtor all sales women zoomIn"
                                    data-wow-duration="2000ms">
                                    <div class="product-single-item">
                                        <div class="image">
                                            <img src={{ good.info.gimage }} alt="">

                                            <ul class="cart-wrap">
                                                <li>
                                                    <a href="/web/addtocart/?id={{good.info.id}}"
                                                        data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Add To Cart"><i
                                                            class="fi flaticon-shopping-cart"></i></a>
                                                </li>
                                                <li data-bs-toggle="modal" data-bs-target="#{{ good.viewname }}">
                                                    <button data-bs-toggle="tooltip" data-bs-html="true"
                                                        title="Quick View"><i class="fi ti-eye"></i></button>
                                                </li>
                                                <li>
                                                    <a href="/web/tocheckout/?id={{ good.info.id }}"
                                                        data-bs-toggle="tooltip" data-bs-html="true" title="Checkout"><i
                                                            class="fa fa-credit-card" aria-hidden="true"></i></a>
                                                </li>
                                            </ul>
                                            <div class="shop-btn">
                                                <a class="product-btn" href="/web/shop/">Shop Now</a>
                                            </div>
                                        </div>
                                        <div class="text">
                                            <h2><a href="/web/singlegoods/?id={{ good.info.id }}">{{ good.info.gname
                                                    }}</a></h2>
                                            <div class="price">
                                                <del class="old-price">${{ good.info.goldprice }}</del>
                                                <span class="present-price">${{ good.info.gprice }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div id="{{ good.viewname }}" class="modal fade" tabindex="-1">
                                    <div class="modal-dialog quickview-dialog">
                                        <div class="modal-content">
                                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                aria-label="Close"><i class="ti-close"></i></button>
                                            <div class="modal-body d-flex">
                                                <div class="product-details">
                                                    <div class="row align-items-center">
                                                        <div class="col-lg-5">
                                                            <div class="product-single-img">
                                                                <div class="modal-product">
                                                                    <div class="item">
                                                                        <img src="{{ good.info.gimage }}" alt="">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-7">
                                                            <div class="product-single-content">
                                                                <h5>{{ good.info.gname }}</h5>
                                                                <h6>{{ good.info.gprice }}</h6>

                                                                <ul class="rating">
                                                                    <li><i class="fa fa-star" aria-hidden="true"></i>
                                                                    </li>
                                                                    <li><i class="fa fa-star" aria-hidden="true"></i>
                                                                    </li>
                                                                    <li><i class="fa fa-star" aria-hidden="true"></i>
                                                                    </li>
                                                                    <li><i class="fa fa-star" aria-hidden="true"></i>
                                                                    </li>
                                                                    <li><i class="fa fa-star" aria-hidden="true"></i>
                                                                    </li>
                                                                </ul>
                                                                <p>{{ good.info.gdescshort }}</p>
                                                                <div class="product-filter-item color">
                                                                    <div class="color-name">
                                                                        <span>Color :</span>
                                                                        <ul>
                                                                            <li class="color1"><input id="a1"
                                                                                    type="radio" name="color"
                                                                                    value="30">
                                                                                <label for="a1"></label>
                                                                            </li>
                                                                            <li class="color2"><input id="a2"
                                                                                    type="radio" name="color"
                                                                                    value="30">
                                                                                <label for="a2"></label>
                                                                            </li>
                                                                            <li class="color3"><input id="a3"
                                                                                    type="radio" name="color"
                                                                                    value="30">
                                                                                <label for="a3"></label>
                                                                            </li>
                                                                            <li class="color4"><input id="a4"
                                                                                    type="radio" name="color"
                                                                                    value="30">
                                                                                <label for="a4"></label>
                                                                            </li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                                <div class="product-filter-item color filter-size">
                                                                    <div class="color-name">
                                                                        <span>{{ good.gpropertynae }} :</span>
                                                                        <ul>
                                                                            {% for item in good.gpropertyvalue %}
                                                                            <li class="color"><input id="wa1"
                                                                                    type="radio" name="size" value="30">
                                                                                <label for="wa1">{{ item }} </label>
                                                                            </li>
                                                                            {% endfor %}
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                                <div class="pro-single-btn">
                                                                    <div class="quantity cart-plus-minus">
                                                                        <input type="text" value="1">
                                                                        <div class="dec qtybutton">-</div>
                                                                        <div class="inc qtybutton"></div>
                                                                    </div>
                                                                    <a href="#" class="theme-btn">Add to cart</a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end of pengu-product-category-section -->

        <!-- start of pengu-spacing-section -->
        <section class="pengu-spacing-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-12">
                        <div class="lookbook-benner">
                            <div class="bg-image">
                                <img src="assets/images/lookbook.jpg" alt="">
                            </div>
                            <div class="content">
                                <h2>LOOKBOOK 2023</h2>
                                <p>Best fasionable brand in the world</p>
                                <a class="theme-btn" href="/web/shop/">View Collection</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-12">
                        <div class="winter-benner">
                            <div class="bg-image">
                                <img src="assets/images/winter.jpg" alt="">
                            </div>
                            <div class="content">
                                <span>Winter Sale</span>
                                <h2>UP TO 70% OFF</h2>
                                <a class="theme-btn" href="/web/shop/">Shop Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end of pengu-spacing-section -->

        <!-- start of pengu-bestseller-section -->
        <section class="pengu-bestseller-section section-padding">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-6 col-12">
                        <div class="wpo-section-title">
                            <h2>Best Seller</h2>
                            <p>Top sale in this week and this season.</p>
                        </div>
                    </div>
                </div>
                <div class="bestseller-wrap">
                    <div class="row">
                        {% for good in goods3 %}
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="product-single-item">
                                <div class="image">
                                    <img src={{ good.info.gimage }} alt="">

                                    <ul class="cart-wrap">
                                        <li>
                                            <a href="/web/addtocart/?id={{good.info.id}}" data-bs-toggle="tooltip"
                                                data-bs-html="true" title="Add To Cart"><i
                                                    class="fi flaticon-shopping-cart"></i></a>
                                        </li>
                                        <li data-bs-toggle="modal" data-bs-target="#{{ good.viewname }}">
                                            <button data-bs-toggle="tooltip" data-bs-html="true" title="Quick View"><i
                                                    class="fi ti-eye"></i></button>
                                        </li>
                                        <li>
                                            <a href="/web/tocheckout/?id={{ good.info.id }}" data-bs-toggle="tooltip"
                                                data-bs-html="true" title="Checkout"><i class="fa fa-credit-card"
                                                    aria-hidden="true"></i></a>
                                        </li>
                                    </ul>
                                    <div class="shop-btn">
                                        <a class="product-btn" href="/web/shop/">Shop Now</a>
                                    </div>
                                </div>
                                <div class="text">
                                    <h2><a href="/web/singlegoods/?id={{ good.info.id }}">{{ good.info.gname }}</a></h2>
                                    <div class="price">
                                        <del class="old-price">${{ good.info.goldprice }}</del>
                                        <span class="present-price">${{ good.info.gprice }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="{{ good.viewname }}" class="modal fade" tabindex="-1">
                            <div class="modal-dialog quickview-dialog">
                                <div class="modal-content">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"><i class="ti-close"></i></button>
                                    <div class="modal-body d-flex">
                                        <div class="product-details">
                                            <div class="row align-items-center">
                                                <div class="col-lg-5">
                                                    <div class="product-single-img">
                                                        <div class="modal-product">
                                                            <div class="item">
                                                                <img src="{{ good.info.gimage }}" alt="">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-7">
                                                    <div class="product-single-content">
                                                        <h5>{{ good.info.gname }}</h5>
                                                        <h6>{{ good.info.gprice }}</h6>

                                                        <ul class="rating">
                                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                                            <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                                        </ul>
                                                        <p>{{ good.info.gdescshort }}</p>
                                                        <div class="product-filter-item color">
                                                            <div class="color-name">

                                                                <ul>

                                                                    <li class="color1"><input id="a11" type="radio"
                                                                            name="color" value="30">
                                                                        <label for="a11"></label>
                                                                    </li>
                                                                    <li class="color2"><input id="a2" type="radio"
                                                                            name="color" value="30">
                                                                        <label for="a2"></label>
                                                                    </li>
                                                                    <li class="color3"><input id="a3" type="radio"
                                                                            name="color" value="30">
                                                                        <label for="a3"></label>
                                                                    </li>
                                                                    <li class="color4"><input id="a4" type="radio"
                                                                            name="color" value="30">
                                                                        <label for="a4"></label>
                                                                    </li>

                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="product-filter-item color filter-size">
                                                            <div class="color-name">
                                                                <span>{{ good.gpropertynae }} :</span>
                                                                <ul>
                                                                    {% for item in good.gpropertyvalue %}
                                                                    <li class="color"><input id="wa1" type="radio"
                                                                            name="size" value="30">
                                                                        <label for="wa1">{{ item }} </label>
                                                                    </li>
                                                                    {% endfor %}
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="pro-single-btn">
                                                            <div class="quantity cart-plus-minus">
                                                                <input type="text" value="1">
                                                                <div class="dec qtybutton">-</div>
                                                                <div class="inc qtybutton"></div>
                                                            </div>
                                                            <a href="#" class="theme-btn">Add to cart</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

        </section>
        <!-- end of pengu-bestseller-section -->

        <!-- start of wpo-site-footer-section -->
        <footer class="wpo-site-footer">
            <div class="wpo-upper-footer">
                <div class="container">
                    <div class="row">
                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget about-widget">
                                <div class="logo widget-title">
                                    <img src="assets/images/logo.svg" alt="blog">
                                </div>
                                <p>Mattis inelit neque quis donecyir eleng amet.
                                    Amet sed et cursus eu euiod.
                                    Egestaerets in morbiet tristique ornare vulputate vitae enim.</p>
                            </div>
                        </div>
                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget link-widget">
                                <h4>Easy 30 days returns</h4>
                                <p>30 days money back guarantee</p>
                                <h4>International Warranty</h4>
                                <p>Offered in the country of usage</p>
                                <h4>100% Secure Checkout</h4>
                                <p>PayPal/ MasterCard / Visa</p>
                            </div>
                        </div>

                        <div class="col col-lg-4 col-md-6 col-sm-12 col-12">
                            <div class="widget newsletter-widget">
                                <div class="widget-title">
                                    <h3>Newsletter</h3>
                                </div>
                                <p>Subscribe to our newsletter and get 10% off your first purchase.</p>
                                <form>
                                    <div class="input-1">
                                        <input type="email" class="form-control" placeholder="Your Email Address.. "
                                            required="">
                                    </div>
                                    <div class="submit clearfix">
                                        <button type="submit">Subscribe</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div> <!-- end container -->
            </div>
            <div class="wpo-lower-footer">
                <div class="container">
                    <div class="row">
                        <div class="col col-xs-12">
                            <p class="copyright"> Copyright &copy; 2023 Canun By <a
                                    href="http://www.bootstrapmb.com">bootstrapMB</a>. All
                                Rights Reserved.</p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end of wpo-site-footer-section -->

        <!-- 唯一商品详细弹窗 -->
        <div id="popup-quickview" class="modal fade" tabindex="-1">
            <div class="modal-dialog quickview-dialog">
                <div class="modal-content">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                            class="ti-close"></i></button>
                    <div class="modal-body d-flex">
                        <div class="product-details">
                            <div class="row align-items-center">
                                <div class="col-lg-5">
                                    <div class="product-single-img">
                                        <div class="modal-product">
                                            <div class="item">
                                                <img class="gimage" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-7 fouram">
                                    <form id="addToCart" class="addToCart needs-validation" novalidate>
                                        <input type="hidden" name="id" value="" />
                                        <div class="product-single-content">
                                            <h5 class="gname"></h5>
                                            <h6 class="gprice"></h6>
                                            <ul class="rating">
                                                <li>
                                                    <i class="fa fa-star" aria-hidden="true"></i>
                                                </li>
                                            </ul>
                                            <p class="gdescshort"></p>
                                            <div class="product-filter-item color">
                                                <div class="color-name">
                                                    <span class="gcolorname"></span>
                                                    <ul id="color">
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="product-filter-item color filter-size">
                                                <div class="color-name">
                                                    <span class="gpropertynae"></span>
                                                    <ul id="size">
                                                        <li><input id="{{ item }}" type="radio" name="proppty123"
                                                                value="{{ item }}">
                                                            <label for="{{ item }}">{{ item }}
                                                            </label>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="pro-single-btn">
                                                <div class="quantity cart-plus-minus">
                                                    <input name="gcount123" type="text" value="1">
                                                    <div class="dec qtybutton">-</div>
                                                    <div class="inc qtybutton"></div>
                                                </div>
                                                <a id="submitCart" style="cursor: pointer " class="theme-btn">Add to
                                                    cart</a>
                                            </div>
                                        </div>
                                    </form>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- end of page-wrapper -->

    <!-- All JavaScript files
    ================================================== -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <!-- Plugins for this template -->
    <script src="assets/js/modernizr.custom.js"></script>
    <script src="assets/js/jquery.dlmenu.js"></script>
    <script src="assets/js/jquery-plugin-collection.js"></script>
    <!-- Custom script for this template -->
    <script src="assets/js/script.js"></script>
    <script>
        $(function () {
            // 将选中信息提交到服务器
            function sumitInfo() {
                $.ajax({
                    url: `/web/cart/?id=${1}`,
                    type: 'get',
                    data: {
                        id: $('.addToCart span[name="gid123"').val(),
                        color: $('.addToCart input[name="proppty123"]"]').val(),
                        size: $('.addToCart input[name="proppty123"]').val(),
                        count: $('.addToCart input[name="gcount123"]').val(),
                    },
                    success: function (result) {
                        //回调函数 

                    }
                });
            }

            $('.addToCart span[name="gid123"]').change(function () {
                sumitInfo()
            });

            $('.addToCart input[name="color123"]').change(function () {
                sumitInfo()
            });

            $('.addToCart input[name="proppty123"]').change(function () {
                sumitInfo()
            });

            $('.addToCart input[name="gcount123"]').change(function () {
                sumitInfo()
            });

            // 监听提交到购物车
            $('#submitCart').click(function () {
                console.log(123123)
                console.log($("#addToCart").serialize())
                $.ajax({
                    url: `/web/addtocart/?id=${1}`,
                    type: 'post',
                    dataType: 'json',
                    data: $("#addToCart").serialize(),
                    success: function (result) {
                        //回调函数 
                        console.log(result.status)
                        window.location.href = '/web/cart'
                    }
                });
            })

            // 点击商品信息后
            const good = {  //示例数据
                id: 1,
                gimage: 'assets/images/product-category/7.jpg',
                gname: 'White Wedding Shoe',
                gprice: '120 USD',
                rating: 4,
                gdescshort: 'Lorem ipsum dolor sit amet, consectetur',
                gcolorname: 'Color',
                gcolorvalue: ['red', 'blue', 'black', 'green'],
                gpropertyvalue: ['300ml', '500ml', '1l'],
                gpropertynae: 'Size',
            }

            $('#popup-quickview').on('show.bs.modal', function (event) {
                console.log(123123)
                var button = $(event.relatedTarget); // 获取触发模态框的按钮

                // var good = button.data('custom-param'); // 获取自定义属性中的值，上线后可换替换为实际值
                $('#popup-quickview input[name="id"]').val(good.id)
                $('#popup-quickview .gimage').attr('src', good.gimage)
                $('#popup-quickview .gname').text(good.gname)
                $('#popup-quickview .gprice').text(good.gprice)
                $('#popup-quickview .rating').empty();
                for (let i = 1; i <= good.rating; i++) {
                    $('#popup-quickview .rating').append(`<li>
                            <i class="fa fa-star" aria-hidden="true"></i>
                        </li>`)
                }
                $('#popup-quickview .gdescshort').text(good.gdescshort)
                $('#popup-quickview .gcolorname').text(good.gcolorname)
                $('#popup-quickview .gpropertynae').text(good.gpropertynae)
                $('#color').empty();
                for (let i = 0; i < good.gcolorvalue.length; i++) {
                    const color = good.gcolorvalue[i]
                    $('#color').append(`<li>
                        <input id="${color}" type="radio" name="color123"
                                value="${color}">
                            <label for="${color}"
                                style='background:${color}'></label>
                        </li>`)
                }
                $('#size').empty();
                for (let i = 0; i < good.gpropertyvalue.length; i++) {
                    const size = good.gpropertyvalue[i]
                    $('#size').append(`<li>
                        <input id="size_${size}" type="radio" name="proppty123"
                                value="${size}">
                            <label for="size_${size}">${size}
                            </label>
                        </li>`)
                }
                $('#popup-quickview').show()
            });

        })

    </script>

</body>

</html>